<template>
  <div>
    <div class="windowInfo windowInfo2">

      <div class="showBox1">
        <div class="tableBox">
          <a-table :columns="columns" :pagination="false" :data-source="data" bordered size="small" style="width:100%">
            <div slot="title">
              <div class='topInfo' style="display:flex">
                <div style="width:100%;text-align:center;color:#fff;font-size:16px">指控车状态</div>

              </div>
            </div>

          </a-table>

        </div>
      </div>
    </div>
  </div>
</template>

<script>

import '@/assets/less/dashborder.less'
import $ from 'jquery'
import { mapGetters } from 'vuex'
import { getAction, httpAction } from '@/api/manage'
import { filterDictTextByCache } from '@comp/dict/JDictSelectUtil'
export default {
  computed: {
    ...mapGetters(['websocketMsg']),
    websocketMsg() {
      return this.$store.state.user.websocketMsg
    },
  },
  watch: {
    websocketMsg: {
      handler(val) {
        let msg = JSON.parse(val)
        console.log(msg, '-----websocket的数据');
        if (msg.cmd == 'HOME_REFRESH') {
          this.getRunningFightDemandInfoHomePageVo()
        }
      },
    },
  },
  data() {
    const columns = [
      {
        title: '识别码',
        dataIndex: 'identificationCode',
        key: 'identificationCode',
        customRender: function (text) {
          return text ? text : '/'
        }
      },
      {
        title: '在网状态',
        dataIndex: 'networkStatus',
        key: 'networkStatus',
        customRender: function (t, r, index) {
          return t ? filterDictTextByCache('network_status', t) : '/';
        },
      },

      {
        title: '上下行明/密态',
        dataIndex: 'communicationType',
        key: 'communicationType',
        customRender: function (t, r, index) {
          return t ? filterDictTextByCache('communicationType', t) : '/';
        },
      },
      {
        title: '上行定/跳频模式',
        key: 'satelliteUpCvCfType',
        dataIndex: 'satelliteUpCvCfType',
        customRender: function (t, r, index) {
          return t ? filterDictTextByCache('SatelliteUpCvCfType', t) : '/';
        },
      },
      {
        title: '下行定/跳频模式',
        dataIndex: 'satelliteDownCvCfType',
        key: 'satelliteDownCvCfType',
        customRender: function (t, r, index) {
          return t ? filterDictTextByCache('SatelliteUpCvCfType', t) : '/';
        },
      },
      {
        title: '周期交互',
        dataIndex: 'cycleInteractionState',
        key: 'cycleInteractionState',
        customRender: function (t, r, index) {
          return t ? filterDictTextByCache('cycle_interaction_state', t) : '/';
        },
      },
      {
        title: '起跳',
        dataIndex: 'jumpNo',
        key: 'jumpNo',
        customRender: function (text) {
          return text ? text : '/'
        }
      },
      {
        title: '时隙个数',
        dataIndex: 'slotTotal',
        key: 'slotTotal',
        customRender: function (text) {
          return text ? text : '/'
        }
      },
      {
        title: '时隙号',
        dataIndex: 'slotInfo',
        key: 'slotInfo',
        customRender: function (text) {
          return text ? text : '/'
        }
      },
      {
        title: '上行速率模式',
        dataIndex: 'satelliteUpCvCr',
        key: 'satelliteUpCvCr',
        customRender: function (text) {
          return text ? text : '/'
        }
      },
      {
        title: '下行速率模式',
        dataIndex: 'satelliteDownCvCr',
        key: 'satelliteDownCvCr',
        customRender: function (text) {
          return text ? text : '/'
        }
      },
      // {
      //   title: '星车下行速率档位',
      //   dataIndex: 'address',
      //   key: 'address',
      // },
      {
        title: '下行链路信噪比',
        dataIndex: 'ratio',
        key: 'ratio',
        customRender: function (text) {
          return text ? text : '/'
        }
      },
      {
        title: '设备状态',
        dataIndex: 'deviceStatus',
        key: 'deviceStatus',
        customRender: function (t, r, index) {
          return t ? filterDictTextByCache('deviceStatus', t) : '/';
        },
      },
    ]

    const data = [
      {
        jumpNo: '1',
        identificationCode: '2',
        name: '指控车12',
        networkStatus_dictText: 1,
        cycleInteractionStatus_dictText: 1,

      },
      // {
      //   key: '21',
      //   time: '1-3',
      //   name: '指控车2',
      //   networkStatus_dictText: 0,
      //   cycleInteractionStatus_dictText: 1,
      //   user: [
      //     {
      //       key: '12',
      //       ballNo: '导弹1',
      //       networkStatus_dictText: 1,
      //       directTransmission: 0,
      //     },
      //     {
      //       key: '1142',
      //       ballNo: '导弹12',
      //       networkStatus_dictText: 0,
      //       directTransmission: 1,
      //     },

      //   ],
      // },
      // {
      //   key: '3',
      //   time: '1-4',
      //   name: '指控车3',
      //   networkStatus_dictText: 1,
      //   cycleInteractionStatus_dictText: 0,
      //   user: [
      //     {
      //       key: '12',
      //       ballNo: '导弹1',
      //       networkStatus_dictText: 0,
      //       directTransmission: 0,
      //     },
      //   ],
      // },
      // {
      //   key: '4',
      //   time: '1-5',
      //   name: '指控车4',
      //   cycleInteractionStatus_dictText: 0,
      //   networkStatus_dictText: 1,
      //   user: [
      //     {
      //       key: '12',
      //       ballNo: '导弹1',
      //       networkStatus_dictText: 1,
      //       directTransmission: 0,
      //     },
      //     {
      //       key: '1192',
      //       ballNo: '导弹12',
      //       networkStatus_dictText: 0,
      //       directTransmission: 0,
      //     },
      //     {
      //       key: '11542',
      //       ballNo: '导弹13',
      //       networkStatus_dictText: 0,
      //       directTransmission: 0,
      //     },
      //     {
      //       key: '111',
      //       ballNo: '导弹13',
      //       networkStatus_dictText: 0,
      //       directTransmission: 0,
      //     }, {
      //       key: '114',
      //       ballNo: '导弹13',
      //       networkStatus_dictText: 0,
      //       directTransmission: 0,
      //     },
      //   ],
      // },
    ]

    return {

      data,
      dataSource: [],
      columns,
      url: {
        sendPackage: "/channel/nmcChannelInfo/sendPackage",
        getDirectTransmission: "/missile/nmcMissileInfo/getByFightDemandIdAndNcvIdentificationCodeOfHomePageVo",
        getInteractionStatus: "/commandVehicle/nmcCommandVehicle/getByCurrentDayRunningFightDemandOfCommandVehicleHomePageVo",
        getRunningFightDemandInfoHomePageVo: "/fightDemand/nmcFightDemand/getRunningFightDemandInfoHomePageVo"
      }
    }
  },
  mounted() {
    // this.getList()
    this.getRunningFightDemandInfoHomePageVo();
  },
  methods: {
    loadData(){},
    /**
     * 获取首页的指挥车信息
     */
    getRunningFightDemandInfoHomePageVo() {
      getAction(this.url.getRunningFightDemandInfoHomePageVo).then(res => {
        if (res.success) {
          this.data = [res.result];
        } else {
          this.$message.error(res.message)
        }
      })
    },
    onChangeCar(value) {
      console.log(value)
      let params = {
        nmcPackageGridValues: [
          {
            gridCode: '17-接收端识别码',
            packageGridValue: value,
          },
        ],
        packageCode: '17指挥车网络状态查询指令',
      }
      httpAction(this.url.sendPackage, params, 'post').then((res) => {
        if (res.code == 200) {
          this.$message.success('指挥车网络状态查询指令已发送！')
        } else {
          this.$message.error(res.message)
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
// .showBox1{
.topInfo {
  width: 100%;
  display: flex;
  justify-content: space-between;

}

// }
/* .windowInf */
.titleBox {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 30px;

  .keyBox {
    font-size: 14px;

    color: #fff;
    height: auto;
    display: flex;
    border-radius: 15px;
    padding: 5px;

    div {
      padding: 0 2px;
    }

    .WPZ {
      line-height: 14px;
      margin-right: 5px;

      &::before {
        display: inline-block;
        content: '';
        width: 12px;
        height: 12px;
        background: red;
        border-radius: 50%;
        margin-right: 10px;
      }
    }

    .JL {
      line-height: 14px;

      &::before {
        display: inline-block;
        content: '';
        width: 12px;
        height: 12px;
        background: rgb(108, 245, 108);
        border-radius: 50%;
        margin-right: 10px;
      }
    }

    // .WJL {
    //   background: rgb(230, 215, 19);
    // }
    // .JL {
    //   background: rgb(80, 226, 60);
    // }
    // .DX {
    //   background: rgb(119, 118, 118);
    // }
  }
}
</style>

<style lang="less" scoped>
.tableBox {
  width: 100%;

  .ant-table-header {
    background: transparent !important;
    font-weight: 500 !important;
  }

  .ant-table .ant-table-thead>tr>th {
    background: transparent !important;
    font-weight: 500 !important;
  }

  h5 {
    margin: 3px;
    padding: 0;
    color: #fff;
  }
}


.windowInfo {
  position: relative;
  min-width: 45px;
  min-height: 45px;

  line-height: 30px;
  text-align: center;
  color: #fff;
  padding: 5px 2px;
  background: rgba(30, 36, 50, 0.6) !important;

  .bodyBox {
    // width: 250px;
    display: flex;

    .body {
      width: 250px;
      margin: -1px;
      border: 1px solid;
    }
  }
}

/* 四角边框--start */
.windowInfo {
  position: relative;
  // width: 300px;
  // /* height: 300px; */
  // margin: 300px auto;
  // /* background: rgba(1, 19, 67, 0.8); */

  border: 2px solid #58d0f3 !important;
  z-index: 1;
}

.windowInfo::before {
  position: absolute;
  content: '';
  top: -2px;
  bottom: -2px;
  left: 30px;
  width: calc(100% - 60px);
  /* border-top: 2px solid #016886; */
  /* border-bottom: 2px solid #016886; */
  border-bottom: 2px solid #4f78ae;
  border-top: 2px solid #4f78ae;
  z-index: -1;
}

.windowInfo::after {
  position: absolute;
  content: '';
  top: 30px;
  right: -2px;
  left: -2px;
  height: calc(100% - 60px);
  border-right: 2px solid #4f78ae;
  border-left: 2px solid #4f78ae;
  z-index: -1;
}

/* 四角边框--end */
</style>

<style>
.windowInfo .ant-empty-normal {
  color: #fff;
}

.windowInfo .ant-table .ant-table-row:hover>td {
  /* color: #fff; */
  /* background: #fff !important; */
}

/* .windowInfo2 .ant-select-selection {
  background: transparent;
  color: #fff;
}
.windowInfo2 .ant-select-arrow svg {
  color: #fff;
} */
.err {
  color: red;
}

.gre {
  color: rgb(108, 245, 108);
}

.windowInfo .ant-descriptions-title,
.windowInfo .ant-descriptions-item-label,
.windowInfo .ant-descriptions-item-content {
  color: #fff !important;
}

.tableBox {
  display: flex;

}
</style>
